<template>

<view class="result-tip">
    BMI状态为【{{showContent}}】
  </view>
  <view class="result" :style="{ 'background-image': 'url(' + EnumBG.BU1 + ')' }">
    {{content}}
  </view>
  <image
        class="h-button-def"
        :class=" sizeStatus ? 'h-button':'h-button-samll'"  
        src="@/static/fund/tip.png"
        mode="widthFix"
    ></image>

    <view class="mr-commit" @click="commit" :style="{ 'background-image': 'url(' + EnumBG.BU4 + ')' }">
        再测一次
    </view>
</template>

<script setup lang="ts">
import {  EnumBG } from "@/utils/content";
import { EnumStatus } from "@/utils/constants";
interface IProps {
    content:string
}
const props = withDefaults(defineProps<IProps>(), {})
const showContent = computed(()=>{
    return Number(props.content) <= 18.4 ? '偏瘦' : (Number(props.content) > 18.4 && Number(props.content) < 23.9) ? '正常'
     : (Number(props.content) > 24.0 && Number(props.content) < 27.9) ? '过重' : '肥胖' })
const sizeStatus = ref(false)
const emit = defineEmits(['update:defStatus'])
const startTimer = () => {
  setInterval(() => {
      sizeStatus.value =  !sizeStatus.value
  }, 1000); // 每秒执行一次
};
const commit = ()=>{
    emit('update:defStatus',EnumStatus.STATUS)
}
onMounted(()=>{
    startTimer()
})
</script>

<style lang="scss" scoped>
.result{
    z-index: 102;
    position: absolute;
    top: 55%;
    left: 15%;
    width: 70%;
    height: 150rpx;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(156,38,176);
    font-size: 50rpx;
    font-weight: bold;
  
}
.result-tip{
    z-index: 102;
    position: absolute;
    top: 45%;
    left: 15%;
    width: 70%;
    height: 150rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(156,38,176);
    font-weight: bold;
}
.h-button-def{
        position: absolute;
        z-index: 99;
        top: 70%;
        height: 170rpx;
        left: 47.5%;
    }
    .h-button{
        width: 42%;
        left: 57.5%;
        transition: all 1s;
    }
    .h-button-samll{
        width: 36%;
        left: 60%;
        transition: all 1s;
    }

    .mr-commit{
        z-index: 102;
        position: absolute;
        top: 78%;
        width: 46%;
        height: 130rpx;
        left: 27%;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
  }

</style>
